<template>
	<div class="menubar-container">
		<el-menu
		class="el-menu-demo"
		mode="horizontal"
		:default-active="activeIndex"
    @select="handleSelect"
		background-color="#545c64"
		text-color="#fff"
		active-text-color="#ffd04b">
      <div class="container">
        <el-row :gutter="5">
          <el-col class="hidden-sm-and-down" :xs="8" :sm="6" :md="4">
            <el-menu-item index="1">
              <div id="logo" class="text-c">
                <router-link to="/" title="首页">
                  <img class="logo-img" :src="logo_img" alt="">
                </router-link>
              </div>
            </el-menu-item>
          </el-col>
          <el-col :xs="4" :sm="3" :md="2">
            <el-menu-item index="1">
              <router-link to="/" title="">
                <span>首页</span>
              </router-link>
            </el-menu-item>
          </el-col>
          <el-col :xs="4" :sm="3" :md="2">
            <el-menu-item index="2">
              <router-link to="/doc" title="">
                <span>文档</span>
              </router-link>
            </el-menu-item>
          </el-col>
          <el-col :xs="4" :sm="3" :md="2">
            <el-menu-item index="3">
              <router-link to="/video" title="">
                <span>讲堂</span>
              </router-link>
            </el-menu-item>
          </el-col>
          <el-col :xs="4" :sm="3" :md="2">
            <el-menu-item index="4">
              <router-link to="/question" title="">
                <span>问答</span>
               </router-link>
            </el-menu-item>
          </el-col>
          <!-- <el-col :xs="4" :sm="3" :md="2">
            <el-menu-item index="5">
              <router-link to="/" title="">
                <span>随笔</span>
              </router-link>
            </el-menu-item>
          </el-col> -->
          <el-col class="fr" :xs="4" :sm="{span: 3}" :md="{span: 2}">
            <el-menu-item v-if="!user.email" @click="login" index="99">
              <el-tooltip class="hidden-xs-only item" effect="dark" content="登录·注册" placement="bottom">
                <i class="mobile-user fa fa-user-circle"></i>
              </el-tooltip>
              <i class="hidden-xs-and-up mobile-user fa fa-user-circle"></i>
            </el-menu-item>
            <div v-if="user.email"
              @mouseover="avator_hover=true"
              @mouseout="avator_hover=false"
              class="profile-info">
              <el-dropdown>
                <a class="avator" href="/">
                  <img class="avator-user" :src="avator" alt="">
                </a>
                <el-dropdown-menu class="user-dropdown" slot="dropdown">
                  <el-dropdown-item>
                    <a class="clearfix menu-link" href="/">
                      <div class="user-avatar fl">
                        <img class="avator-user" :src="avator" alt="">
                      </div>
                      <div class="user-info fl">
                        <span class="user-name text-ellipsis">用户：{{ user.uid || 'hi_web' }}</span>
                        <span class="user-email text-ellipsis">{{ user.email }}</span>
                      </div> 
                    </a>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <a class="clearfix menu-link">我的主页</a>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <a class="clearfix menu-link">我的课程</a>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <a @click="logout" class="clearfix menu-link" href="/user/logout">退出登录</a>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <div v-show="avator_hover" class="profile-m">
                <div class="username">
                  <b>{{ user.email }}</b>
                </div>
                <div class="member-bottom">
                  <a @click="logout" class="logout fr" href="/user/logout">退出登录</a>
                </div> 
                <el-menu-item v-if="!user.email" @click="login" index="99">
                  <el-tooltip class="hidden-xs-only item" effect="dark" content="登录·注册" placement="bottom">
                    <i class="mobile-user fa fa-user-circle"></i>
                  </el-tooltip>
                  <i class="hidden-xs-and-up mobile-user fa fa-user-circle"></i>
                </el-menu-item>
              </div> -->
            </div>
          </el-col>
        </el-row>
		  </div>
    </el-menu>
	</div>	
</template>


<script>
  // import axios from 'axios'
  import { mapState, mapGetters, mapMutations } from 'vuex'
  export default {
    data() {
      return {
        logo_img: require('assets/logo.png'),
        avator_hover: false,
        avator: 'http://avatar.wpn.itlukai.com/panda.jpg'
      };
    },
    computed: {
      ...mapState([
        'activeIndex'
      ]),
      ...mapGetters([
        'user_info'
      ]),
      user: function () {
        return JSON.parse(localStorage.getItem('user_info')) || {}
      }
    },
    methods: {
      ...mapMutations({
        showLogin: 'SHOW_LOGIN'
      }),
      handleSelect(index) {
        this.activeIndex = index
      },
      login() {
        this.showLogin(1)
      },
      logout() {
        localStorage.removeItem('user_info')
      },
    }
  }
</script>

<style scoped lang="less">
  .el-menu-item {
    padding: 0;
  }
  .el-dropdown {
    vertical-align: top;
    width: 100%;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-menu-item a {
    display: block;
    height: 65px;
    line-height: 65px;
  }
  .el-menu-item a span {
    box-sizing: border-box;
    color: #fff;
    height: 100%;
    display: inline-block;
    border-bottom: 2px solid transparent;
  }
  .el-menu-item.is-active a span {
    color: rgb(255, 208, 75);
    border-bottom-color: rgb(255, 208, 75);
  }
  .el-menu-item .mobile-user {
    font-size: 24px;
    color: #fff;
  }

  .menu-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #29303b;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    width: 240px;
    padding: 10px 0;
    
    &:not(.btn):hover {
      color: #007791;
    }
    .user-avatar {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .user-info {
      color: #686f7a;
      flex: 1;
      min-width: 1px;
      margin-left: 10px;
      .user-name, .user-email {
        display: block;
        height: 20px;
        line-height: 20px;
      }
    }
  }

  
  .user-dropdown li {
    &.menu-logout {
      background: #f7f8fa;
    }
    &.el-dropdown-menu__item {
      line-height: 1.5;
    }
    &:hover {
      background: #f2f3f5 !important;
    }
  }

  #logo {
    height: 56px;
    z-index: 99;
    position: relative;

    a {
      display: inline-block;
      padding: 0 10px 0 10px;
      border-bottom-color: transparent;
      color: #fff;

      .logo-img {
        vertical-align: middle;
        display: inline-block;
        width: 100px;
      }
    }
  }
  .el-menu-item {
    height: 65px;
    line-height: 65px;
  }
  .profile-info {
    position: relative;
    background-color: rgb(84, 92, 100);
    .avator {
      position: relative;
      top: 10px;
      display: inline-block;
      width: 45px;
      height: 45px;
      .avator-user {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .profile-m {
      position: absolute;
      left: calc(50% - 50px);
      top: 56px;
      width: 100px;
      padding-top: 20px;
      height: 100px;
      background-color: #fff;
      box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);

      .username {
        line-height: 20px;
        font-size: 12px;
        color: #000;
        font-weight: 400; 
        text-align: center;
      }
      .member-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #f4f5f7;
        border-radius: 0 0 4px 4px;
        .logout {
          color: #222;
          padding-right: 20px;
          font-size: 12px;
        }
      }
    }
  }

</style>













